﻿@page "/components/image"
<LayoutContent AnchorItems="@(new[]{"示例","基础图片","填充","不同形状的图片","图集样式的图片","API"})">
<PageHeader Title="Image 图片">
    用于展示图片素材。
</PageHeader>

<Example Title="示例">
    <Description></Description>
    <RunContent>
            <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png" Fit="ImageFitType.Cover" style="width: 120px; height: 120px;"></TImage>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png"" Fit=""FitType.Cover"" style=""width: 120px; height: 120px;""></TImage>
```
")
    </CodeContent>
</Example>


<Example Title="基础图片">
    <Description>不同填充模式的图片,提供 fill、contain、cover、none、scale-down 5 种填充类型。</Description>
    <RunContent>
        <TSpace BreakLine=true>
            @{
        var fits = new ImageFitType[] { ImageFitType.Fill, ImageFitType.Contain, ImageFitType.Cover, ImageFitType.None, ImageFitType.ScaleDown };
        foreach (var item in fits)
        {
                                                                                                         <TSpaceItem>
                                                                                                             <div class="Image__wrapper Image__wrapper--shape-square" style="width: 120px; height: 120px;">
                                                                                                                 <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png" Fit="item" style="width:120px;height:120px"></TImage>
                                                                                                             </div>
                                                                                                             <span>@item.ToString()</span>
                                                                                                         </TSpaceItem>
        }
      }
        </TSpace>
    </RunContent>
    <CodeContent>
    @Code.Create(@"
```cshtml-razor
        <TSpace BreakLine=true>
            @{
                var fits = new FitType[] { FitType.Fill, FitType.Contain, FitType.Cover, FitType.None, FitType.ScaleDown };
                foreach (var item in fits)
                {
                     <TSpaceItem>
                         <div class=""Image__wrapper Image__wrapper--shape-square"" style=""width: 120px; height: 120px;"">
                             <TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png"" Fit=""item"" style=""width:120px;height:120px""></TImage>
                         </div>
                         <span>@item.ToString()</span>
                     </TSpaceItem>
                }
            }
        </TSpace>
```
")
    </CodeContent>
</Example>


<Example Title="填充">
    <Description>不同填充位置的图片。图片相对于容器的位置。当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。</Description>
    <RunContent>
        <TSpace Vertical style="width: 100%">
            <TSpaceItem >
                <TSpace Vertical >
                    <TSpaceItem>
                      <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                           Fit="ImageFitType.Cover"
                           Position="Position.Center"
                           style="width:120px;height:120px" />
                    <span>cover center</span>
                    </TSpaceItem>

                </TSpace>
                <TSpace Vertical>
                    <TSpaceItem>
                                            <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                           Fit="ImageFitType.Cover"
                           style="width:120px;height:120px"
                           Position="Position.Left" />
                    <span>cover left</span>
                    </TSpaceItem>

                </TSpace>
                <TSpace Vertical>
                    <TSpaceItem>
                                            <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                           Fit="ImageFitType.Cover"
                           style="width:120px;height:120px"
                           Position="Position.Right" />
                    <span>cover right</span>
                    </TSpaceItem>

                </TSpace>
            </TSpaceItem>
            <TSpaceItem >
                <TSpace Vertical>
                    <TSpaceItem>
                                            <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                           Fit="ImageFitType.Cover"
                           style="width:280px;height:120px"
                           Position="Position.Top" />
                    <span>cover top</span>
                    </TSpaceItem>

                </TSpace>
                <TSpace Vertical>
                    <TSpaceItem>
                                            <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                           Fit="ImageFitType.Cover"
                           style="width:280px;height:120px"
                           Position="Position.Bottom" />
                    <span>cover bottom</span>
                    </TSpaceItem>

                </TSpace>
            </TSpaceItem>
            <TSpaceItem >
                <TSpace Vertical>
                    <TSpaceItem><TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                           Fit="ImageFitType.Contain"
                           style="width:120px;height:200px"
                           Position="Position.Top" />
                    <span>contain top</span></TSpaceItem>

                </TSpace>
                <TSpace Vertical>
                                        <TSpaceItem><TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                           Fit="ImageFitType.Contain"
                           style="width:120px;height:200px"
                           Position="Position.Bottom" />
                    <span>contain bottom</span></TSpaceItem>

                </TSpace>
                <TSpace Vertical>
                                        <TSpaceItem> <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                           Fit="ImageFitType.Contain"
                           style="width:120px;height:200px"
                           Position="Position.Center" />
                    <span>contain center</span></TSpaceItem>

                </TSpace>
            </TSpaceItem>
            <TSpaceItem >
                    <TSpace Vertical>
                        <TSpaceItem>
                                                    <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                               Fit="ImageFitType.Contain"
                               style="width:280px;height:120px"
                               Position="Position.Left" />
                        <span>contain left</span>
                        </TSpaceItem>

                    </TSpace>
                    <TSpace Vertical>
                          <TSpaceItem>                        <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                               Fit="ImageFitType.Contain"
                               style="width:280px;height:120px"
                               Position="Position.Right" />
                        <span>contain right</span></TSpaceItem>

                    </TSpace>
                </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
    @Code.Create(@"
```cshtml-razor
        <TSpace Vertical>
            <TSpaceItem >
                <TSpace Vertical >
                    <TSpaceItem>
                      <TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                           Fit=""FitType.Cover""
                           Position=""Position.Center""
                           style=""width:120px;height:120px"" />
                    <span>cover center</span>
                    </TSpaceItem>

                </TSpace>
                <TSpace Vertical>
                    <TSpaceItem>
                                            <TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                           Fit=""FitType.Cover""
                           style=""width:120px;height:120px""
                           Position=""Position.Left"" />
                    <span>cover left</span>
                    </TSpaceItem>

                </TSpace>
                <TSpace Vertical>
                    <TSpaceItem>
                                            <TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                           Fit=""FitType.Cover""
                           style=""width:120px;height:120px""
                           Position=""Position.Right"" />
                    <span>cover right</span>
                    </TSpaceItem>

                </TSpace>
            </TSpaceItem>
            <TSpaceItem >
                <TSpace Vertical>
                    <TSpaceItem>
                                            <TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                           Fit=""FitType.Cover""
                           style=""width:280px;height:120px""
                           Position=""Position.Top"" />
                    <span>cover top</span>
                    </TSpaceItem>

                </TSpace>
                <TSpace Vertical>
                    <TSpaceItem>
                                            <TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                           Fit=""FitType.Cover""
                           style=""width:280px;height:120px""
                           Position=""Position.Bottom"" />
                    <span>cover bottom</span>
                    </TSpaceItem>

                </TSpace>
            </TSpaceItem>
            <TSpaceItem >
                <TSpace Vertical>
                    <TSpaceItem><TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                           Fit=""FitType.Contain""
                           style=""width:120px;height:200px""
                           Position=""Position.Top"" />
                    <span>contain top</span></TSpaceItem>

                </TSpace>
                <TSpace Vertical>
                                        <TSpaceItem><TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                           Fit=""FitType.Contain""
                           style=""width:120px;height:200px""
                           Position=""Position.Bottom"" />
                    <span>contain bottom</span></TSpaceItem>

                </TSpace>
                <TSpace Vertical>
                                        <TSpaceItem> <TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                           Fit=""FitType.Contain""
                           style=""width:120px;height:200px""
                           Position=""Position.Center"" />
                    <span>contain center</span></TSpaceItem>

                </TSpace>
            </TSpaceItem>
            <TSpaceItem >
                    <TSpace Vertical>
                        <TSpaceItem>
                                                    <TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                               Fit=""FitType.Contain""
                               style=""width:280px;height:120px""
                               Position=""Position.Left"" />
                        <span>contain left</span>
                        </TSpaceItem>

                    </TSpace>
                    <TSpace Vertical>
                          <TSpaceItem>                        <TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                               Fit=""FitType.Contain""
                               style=""width:280px;height:120px""
                               Position=""Position.Right"" />
                        <span>contain right</span></TSpaceItem>

                    </TSpace>
                </TSpaceItem>
        </TSpace>
```
")
    </CodeContent>
</Example>

<Example Title="不同形状的图片">
    <Description>提供方形、圆角方形、圆角 3 种形状。当图片长宽不相等时，无法使用 circle 展示一个正圆。</Description>
    <RunContent>
   <TSpace>
    <TSpace Vertical>
      <TImage
        Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
        Shape="ShapeType.Square"
        style="width:160px;height:160px;"
        Fit="ImageFitType.Cover"
      />
      <span>square</span>
    </TSpace>
    <TSpace Vertical>
      <TImage
        Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
        style="width:160px;height:160px;"
        Fit="ImageFitType.Cover"
        Shape="ShapeType.Round"
      />
      <span>round</span>
    </TSpace>
    <TSpace Vertical>
      <TImage
        Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
        style="width:160px;height:160px;"
        Shape="ShapeType.Circle"
        Fit="ImageFitType.Cover"
      />
      <span>circle</span>
    </TSpace>
  </TSpace>
    </RunContent>
    <CodeContent>
    @Code.Create(@"
```cshtml-razor
   <TSpace>
    <TSpace Vertical>
      <TImage
        Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
        Shape=""ShapeType.Square""
        style=""width:160px;height:160px;""
        Fit=""FitType.Cover""
      />
      <span>square</span>
      <span>square</span>
    </TSpace>
    <TSpace Vertical>
      <TImage
        Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
        style=""width:160px;height:160px;""
        Fit=""FitType.Cover""
        Shape=""ShapeType.Round""
      />
      <span>round</span>
    </TSpace>
    <TSpace Vertical>
      <TImage
        Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
        style=""width:160px;height:160px;""
        Shape=""ShapeType.Circle""
        Fit=""FitType.Cover""
      />
      <span>circle</span>
    </TSpace>
  </TSpace>
```
")
    </CodeContent>
</Example>

<Example Title="图集样式的图片">
    <Description>图片呈现图集样式的效果。</Description>
    <RunContent>
            <TImage Src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                style=" width:284px;height:160px;"
                Gallery="true"
                OverlayContent="label"
                />
    </RunContent>
    <CodeContent>
    @Code.Create(@"
```cshtml-razor
            <TImage Src=""https://tdesign.gtimg.com/demo/demo-image-1.png""
                style="" width:284px;height:160px;""
                Gallery=""true""
                OverlayContent=""label""
                />
```
")
    </CodeContent>
    </Example><div id="API"></div>
<ComponentAPI Component="typeof(TImage)"></ComponentAPI>
</LayoutContent>
@inject IJSRuntime JS
